import React, { memo,PureComponent } from 'react';
import { Card, Radio,Select,Button } from 'antd';
import { Row,Col,FormattedMessage } from 'umi-plugin-react/locale';
import styles from './Analysis.less';
import OrganPie from './OrganPie';
import OrganBar from './OrganBar';
import OrganList from './OrganList';
import Yuan from '@/utils/Yuan';
const { Option } = Select;


class OrganStatistic extends PureComponent{
	constructor(props) {
	    super(props);
	    this.state = {
          salesType: "all",
          visbleWayByOrgan: 'pie',
          organType: 'company_area',
          modalOrganVisible: false
	    }
	}

  //机构统计表显示
  handleOrganModalVisible = flag => {
  	this.setState({
  		modalOrganVisible: !!flag,
  	});
  };

  //机构显示切换
  handleChangeOrganType = e => {
  	if(e.target.value == "bar") {
  		this.setState({
   			visbleWayByOrgan: "pie"
      });
  	}else if(e.target.value == "pie"){
  		this.setState({
   			visbleWayByOrgan: "bar"
      });
  	}else {
    	this.setState({
        salesType: e.target.value,
      });
  	}
  };

  //机构查询切换
  handleSearchOrgan = e => {
  	this.setState({
  		organType: e
  	})
  };

  render() {
    const {
      dropdownGroup,
      loading,
      organInfoData,
      organInfoDataByType,
  		organInfoDataByLevel
    } = this.props;

    const { salesType,visbleWayByOrgan,organType,modalOrganVisible } = this.state;
    let organPieData;
//  if (salesType === 'all') {
//    organPieData = organInfoData;
//  } else {
//    organPieData = salesType === 'online' ? salesTypeDataOnline : salesTypeDataOffline;
//  }
    if (organType === 'company_area') {
      organPieData = organInfoData;
    } else if(organType === "company_type"){
      organPieData = organInfoDataByType;
    }else {
    	organPieData = organInfoDataByLevel;
    }
    return (
      <Card
          loading={loading}
          className={styles.salesCard}
          bordered={false}
          title={
            <FormattedMessage
              id="app.statisticanalysis.organbyarea"
              defaultMessage="The Proportion of Sales"
            />
          }
          bodyStyle={{ padding: 24 }}
          extra={
            <div className={styles.salesCardExtra}>
              {dropdownGroup}
              <div className={styles.salesTypeRadio}>
                  <Button onClick={()=> this.handleOrganModalVisible(true)}>
                    机构统计表
                  </Button>
                  <Select  style={{minWidth: '120px',marginRight: '10px',marginLeft: '10px'}} defaultValue="company_area" placeholder="请选择" onChange={this.handleSearchOrgan}>
                      <Option value="company_area">单位所在政区</Option>
                      <Option value="company_type">单位性质类别</Option>
                      <Option value="company_level">单位级别</Option>
                  </Select>
                <Radio.Group value={salesType} onChange={this.handleChangeOrganType}>
                  {/*<Radio.Button value="all">
                    <FormattedMessage id="app.analysis.channel.all" defaultMessage="ALL" />
                  </Radio.Button>
                  <Radio.Button value="online">
                    <FormattedMessage id="app.analysis.channel.online" defaultMessage="Online" />
                  </Radio.Button>
                  <Radio.Button value="stores">
                    <FormattedMessage id="app.analysis.channel.stores" defaultMessage="Stores" />
                  </Radio.Button>*/}
                  {visbleWayByOrgan == "bar"?(
                    <Radio.Button value="bar">
                      <FormattedMessage id="app.analysis.channel.bar" defaultMessage="bar" />
                    </Radio.Button>
                  ):(
                    <Radio.Button value="pie">
                      <FormattedMessage id="app.analysis.channel.pie" defaultMessage="pie" />
                    </Radio.Button>
                  )}
                </Radio.Group>
              </div>
            </div>
          }
          style={{ marginTop: 24 }}
        >
          <h4 style={{ marginTop: 10, marginBottom: 32 }}>
            <FormattedMessage id="app.statisticanalysis.organnum" defaultMessage="Sales" />
          </h4>
          {visbleWayByOrgan == "bar"?(
          <OrganBar
            height={300}
            data={organPieData}
            organType={organType}
          />
          ):(
          <OrganPie
            hasLegend
            subTitle={<FormattedMessage id="app.statisticanalysis.organnum" defaultMessage="Sales" />}
            total={() => <span>{organPieData?organPieData.reduce((pre, now) => now.y + pre, 0): null}</span>}
            data={organPieData}
            valueFormat={value => <span>{value}</span>}
            height={270}
            lineWidth={4}
            organType={organType}
            style={{ padding: '8px 0' }}
          />
          )}
          <OrganList
            modalOrganVisible={modalOrganVisible}
            handleOrganModalVisible={this.handleOrganModalVisible}
          />
        </Card>
    )
  }

}

export default OrganStatistic;
